<template>
    <el-aside class="mymenu" :width="isCollapse ? '64px' : '200px'">
        <div class="logo" :style="{ padding: isCollapse ? '4px' : '10px 20px' }">
            <img :src="Logo" alt="" class="logo-img" :style="{ width: isCollapse ? '50px' : '100%' }">
        </div>
        <el-menu :collapse="isCollapse" :default-active="$route.path" class="el-menu-vertical-demo"
            active-text-color="#ffd04b" background-color="#545c64" text-color="#fff" router unique-opened ellipsis>

            <Menu v-for="(item, index) in myRouterList" :key="index" :item="item">
            </Menu>
        </el-menu>
    </el-aside>
</template>

<script lang="ts" setup>
import Logo from '../../assets/logo.png'
import {
    Document,
    Menu as IconMenu,
    Location,
    Setting,
    House,
    User,
    ChatLineSquare,
    Edit,
    Lock,
    UserFilled,
    Present
} from '@element-plus/icons-vue'
import { useStore } from '../../store'
import { computed, toRefs } from 'vue'
import Menu from '../../components/Menu.vue'
const store = useStore()
const isCollapse = computed(() => store.isCollapse)
const { myRouterList } = toRefs(store)


</script>

<style lang="scss" scoped>
.mymenu {
    background: #545c64;
    overflow-x: hidden;

    .logo {
        padding: 10px 20px;
        width: 100%;
        box-sizing: border-box;

        .logo-img {
            width: 100%;

        }
    }
}
</style>

